<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body>*:not(.aside) {
            width: 500px;
            height: 500px;
            background-color: pink;
            margin: 0 auto;
            margin-bottom: 50px;
        }

        .aside {
            /* 默认隐藏 */
            display: none;
            position: fixed;
            left: 50%;
            top: 50px;
            margin-left: -260px;
            transform: translateX(-100%);
            list-style: none;
            width: 100px;
            height: 100px;
            line-height: 33.33px;
            text-indent: 10px;
            background-color: skyblue;
        }

        /* 当前状态 */
        .aside .current {
            background-color: pink;
        }
    </style>

    <script src="./js/jquery.min.js"></script>
    <script>
        jQuery(document).ready(function ($) {
            let top = $('.top').offset().top;
            let flag = true;

            // 滚动到 top 模块
            $(window).scroll(function () {
                if ($('html, body').scrollTop() > top) {
                    $('.aside').fadeIn();
                } else {
                    $('.aside').fadeOut();
                }

                // 滚动改变固定栏着色
                if (flag) {
                    $('.step').each(function (i, el) {
                        if ($('html, body').scrollTop() >= $(el).offset().top) {
                            $('.aside li').eq(i).addClass('current').siblings('li').removeClass('current');
                        }
                    });
                }
            });

            // 点击滚动到指定位置
            $('.aside li').click(function () {
                let index = $(this).index();
                flag = false;
                $('html, body').stop().animate({ scrollTop: $('.step').eq(index).offset().top }, function () {
                    flag = true;
                });
                $(this).addClass('current').siblings('li').removeClass('current');
            });
        });
    </script>
</head>

<body>
    <header>header</header>
    <section class="top step">top</section>
    <section class="middle step">middle</section>
    <section class="bottom step">bottom</section>
    <footer>footer</footer>
    <!-- 电梯导航 -->
    <ul class="aside">
        <li class="current">top</li>
        <li>middle</li>
        <li>bottom</li>
    </ul>
</body>

</html>